/*
文件名称: comboQuery.css
完整存储路径: frontend/static/css/comboQuery.css
功能说明:
  封装组合查询模块的独立样式，设计为卡片形式显示组合查询区域，
  使用全局 CSS 变量统一管理样式参数，便于后续维护和局部覆盖。

使用说明:
  在需要组合查询的页面(如 report.html)中引入该文件。
*/

/* 全局 CSS 变量定义 */
:root {
  --combo-card-width: 100%;
  --combo-card-bg: #ffffff;
  --combo-header-bg: #f5f5f5;
  --combo-header-border: #ddd;
  --combo-font-size: 14px;
  --combo-condition-height: 300px;
  --combo-header-padding: 6px 10px;
  --combo-body-padding: 8px;
  --combo-row-margin-bottom: 3px;
  --combo-control-margin-right: 3px;
  --combo-extra-margin-top: 3px;
  --combo-extra-padding: 4px;
  --combo-extra-border: 1px dashed #ccc;
}

/* 组合查询卡片整体样式 */
.query-card {
  width: var(--combo-card-width);
  background-color: var(--combo-card-bg);
  font-size: var(--combo-font-size);
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

/* 卡片头部：操作按钮区域 */
.query-card .card-header {
  background-color: var(--combo-header-bg);
  border-bottom: 1px solid var(--combo-header-border);
  padding: var(--combo-header-padding);
}

/* 卡片主体：条件区域 */
.query-card .condition-container {
  max-height: var(--combo-condition-height);
  overflow-y: auto;
  padding: var(--combo-body-padding);
  background-color: #fff;
}

/* 每一行条件 */
.query-card .condition-row {
  margin-bottom: var(--combo-row-margin-bottom);
}

/* 条件行内控件的右侧间距 */
.query-card .condition-row .form-select,
.query-card .condition-row .form-control {
  margin-right: var(--combo-control-margin-right);
}

/* 额外复选框区域（针对 multi-select 类型） */
.query-card .extra-options {
  margin-top: var(--combo-extra-margin-top);
  padding: var(--combo-extra-padding);
  background-color: #f8f8f8;
  border: var(--combo-extra-border);
}
